<template>
  <div class="realtop3" style="background-color: saddlebrown">
    <div class="top3">
      <div class="to1"></div>
      <div class="to2"></div>


    </div>


    <div id="stratety">
      <div id="stratety_title">
        <div>旅游攻略</div>
      </div>
      <div id="hotStratety">
        <div class="Stratety_item" v-for="(item,index) in Stratety" :key="item.url">
          <div class="Stratety_item_img">
            <img :src="item.picture" alt="">
          </div>
          <div class="Stratety_item_content">
            <div class="Stratety_item_title" @click="todetail('/detail/nanjiang')">{{ item.title }}</div>
            <div class="Stratety_item_details">{{ item.content }}</div>
            <div class="Stratety_item_bottom">
              <span class="Stratety_item_local">{{ item.place }} /</span>
              <span class="Stratety_item_time">{{ item.time }}</span>
              <span class="Stratety_item_viewNumber"> 浏览·{{ item.visitor }}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 30px">
<div style="margin-right: -250px">
      <span id="stratety_page" v-for="count in this.pagenum" style="float: left;margin-left:-260px;cursor: pointer;margin-top: 0px">
        <span class="pages">{{ count }}</span>
      </span>

<!--  <div style="color: rgb(206, 204, 204);width: 50px;margin-left: 900px;float: left" @click="nextpage">下一页</div>-->
      <el-dropdown @command="pagechange" style="margin-left:620px;color: rgb(206, 204, 204);cursor: pointer;">
       <span class="el-dropdown-link">
        {{page}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="5">5条/页</el-dropdown-item>
          <el-dropdown-item command="10">10条/页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
  <input style="width: 40px;margin-left: 50px;margin-top: -500px" v-model="pagenow" v-on:keydown.enter="nextpage(pagenow)"></input>
    </div>
      </div>
    </div>
    <div id="upranking" style="margin-top: 100px">
      <div class="upranking_title">
        <span>up排行榜</span>
      </div>
      <div class="upranking_list">
        <div class="up_item">
          <div class="up_pic"></div>
          <div class="up_name"></div>
        </div>
        <div class="up_item">
          <div class="up_pic"></div>
          <div class="up_name"></div>
        </div>
        <div class="up_item">
          <div class="up_pic"></div>
          <div class="up_name"></div>
        </div>
        <div class="up_item">
          <div class="up_pic"></div>
          <div class="up_name"></div>
        </div>
        <div class="up_item">
          <div class="up_pic"></div>
          <div class="up_name"></div>
        </div>
        <div class="up_item">
          <div class="up_pic"></div>
          <div class="up_name"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Stratety: [],
      all:[],
      page:'5条/页',
      num:5,
      pagenow:1,
      len:0,
      pagenum:0
    }
  },
  created() {


    // window.scrollTo(0, 0);
  },
  mounted() {
    this.showall()
  },
  methods: {
    showall() {
      this.len=0
      this.$axios.get("http://localhost:9080/strategy/strategy2").then(res => res.data).then(res => {
        this.Stratety=[]
        console.log(res)
        for (let i = 0; res[i] != undefined; i++) {
          this.len++
          res[i].picture = require('@/assets/create/' + res[i].picture)
        }
        this.all = res
        this.pagenum=this.len/this.num+1
        this.pagenum=Math.floor(this.pagenum)
        let j=0;
        for (let i=(this.pagenow-1)*this.num;i<this.num*this.pagenow;i++){
          if(this.all[i]==undefined){
            break
          }
          this.Stratety[j]=this.all[i]
          j++
        }
        console.log(this.all)
        console.log(this.Stratety)

      })
    },
    nextpage(n){
this.pagenow=n
      this.showall()
    },
pagechange(num){
      this.num=num
      this.page=num+'条/页'
      this.showall()
},
    changeLike(index) {
      this.Stratety[index].islike = !this.Stratety[index].islike;
    },
    todetail(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style>
. el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.realtop3 {

}

.top3 {
  background: url("../assets/TravelNote/圣托里尼.png");
  height: calc(70vh - 70px);
  background-size: 100% 100%;
}

.to1 {
  background: url("../assets/TravelNote/圣托里尼名字.png");
  position: absolute;
  width: 278px;
  height: 49px;
  top: 350px;
  left: 150px;

}

.to2 {
  background: url("../assets/TravelNote/图片文字.png");
  width: 1101px;
  height: 179px;
  position: absolute;
  top: 100px;
  left: 100px;
}

#stratety {
  width: 100%;
  margin: 0 auto;
  padding-top: 45px;
  position: relative;
}

#stratety_title {
  color: white;
  width: 65%;
  border-bottom: 2px solid white;
  padding-bottom: 5px;
  position: relative;
  display: flex;
  margin: 0 auto;
}

#stratety_title :nth-child(1) {
  position: relative;
  left: 0px;
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;

}

#hotStratety {
  width: 70%;
  margin: 0 auto;
}

.Stratety_item {
  margin: 0 auto;
  width: 90%;
  margin-top: 50px;
  display: flex;
  height: 160px;
  position: relative;
}

.Stratety_item_img {
  flex: 1;
  height: 100%;
  background-color: black;
  overflow: hidden;
}

.Stratety_item_img:hover img {
  transform: scale(1.03);
  opacity: 0.7;
  cursor: pointer;
}

.Stratety_item_img img {
  width: 101%;
  height: 101%;
  transition: all 0.6s;
}

.Stratety_item_content {
  flex: 3;
  margin-left: 15px;
  position: relative;
}

.Stratety_item_title {
  width: 100%;
  margin-top: 10px;
  color: white;
  font-size: 20px;
}

.Stratety_item_details {
  width: 100%;
  height: 60px;
  text-overflow: ellipsis;
  margin-top: 15px;
  color: rgb(199, 196, 196);
  font-size: 14px;
}

.Stratety_item_details:hover, .Stratety_item_title:hover {
  cursor: pointer;
  text-decoration: underline;
}

.Stratety_item_bottom {
  position: absolute;
  width: 100%;
  bottom: 5px;
  font-size: 13px;
  color: rgb(255, 255, 255);
}

.Stratety_item_islike {
  height: 40px;
  width: 40px;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.Stratety_item_islike:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.Stratety_item_bottom img {
  width: 40px;
}

#stratety_page {
  position: relative;
  width: 20%;
  height: 20px;
  left: 50%;
  margin-top: 30px;
  transform: translateX(-50%);
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  color: rgb(206, 204, 204);
  display: flex;
}

.pages {
  flex: 1;
}

#stratety_page > div:hover {
  cursor: pointer;
  text-decoration: underline;
}

#upranking {
  width: 65%;
  margin: 0 auto;
}

.upranking_title {
  width: 100%;
  color: white;
  margin-top: 50px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  border-bottom: 2px solid white;

}

.upranking_title span {
  margin-left: 10px;
  font-weight: 700;
}

.upranking_list {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 50px;
}

.up_item {
  width: 40%;
  height: 60px;
  background-color: #ececec;
  margin-top: 30px;
  position: relative;
}

.up_item .up_pic {
  width: 55px;
  height: 55px;
  border-radius: 55px;
  background-color: rgb(196, 194, 194);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}
</style>